<template>
	<view>
		<navBar title="小标题"></navBar>
		<view class="" style="background: linear-gradient(to bottom, #fe511d, 100%, #fe511d);color: #fff;">
			<view style="padding:0 20rpx;">
				<u-tabs :list="category" name="cname" :current="tabCurrent" active-color="#fff" inactive-color="#fff"  
				@change="tabChange" bg-color="none"></u-tabs>
			</view>
		</view>
		<swiper class="swiper-page" :style="{height:scrollHeight}" :duration="400" :disable-touch="false"
			@change="tabswiper" :current="tabCurrent">
			<swiper-item v-for="(item,index) in category" :key="index">
				<scroll-view v-if="index===0" scroll-y="true" :style="{height:scrollHeight}"
					@scrolltolower="scrollToBottom">
					<view class="" style="padding: 30rpx;">
						<view class="bor-bg"></view>
						<u-swiper :list="banners" @click="bannerClick" interval="5000" mode="rect" :effect3d="false"></u-swiper>
						<view class="" style="margin:0 0 20rpx 0;border-radius: 4px;overflow: hidden;">
							<u-grid :col="5" :border="false" @click="click">
								<u-grid-item v-for="(item,index1) in pingtais" :key="index1" bg-color="none">
									<image class="pingtai-icon" :src="item.icon" mode="widthFix"></image>
									<view class="grid-text">{{item.name}}</view>
								</u-grid-item>
							</u-grid>
						</view>
						<view>
							<u-notice-bar mode="horizontal" :list="notice" :speed="100"></u-notice-bar>
						</view>
						<!-- 商品列表 -->
						<view class="" style="margin: 40rpx 0 30rpx 0">
							<u-divider border-color="#888" half-width="80" bg-color="#f6f6f6">
								<text style="font-weight: 900;font-size: 30rpx;color: #111;">精品推荐</text>
							</u-divider>
						</view>
						<view class="goods-list">
							<commonList ref="commonList" :cid="category[tabCurrent].cid || 0"></commonList>
						</view>
					</view>
				</scroll-view>
				<scroll-view v-else-if="index ==tabCurrent"
					scroll-y="true" @scrolltolower="scrollToBottom" :style="{height:scrollHeight}">
					<view class="" style="padding: 20rpx;margin: 20rpx;background-color: #fff;border-radius: 4px;">
						<commonList :key="tabCurrent" ref="commonList" :cid="category[tabCurrent].cid || 0">
						</commonList>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import commonList from '../../components/goods/commonList.vue'
	import navBar from '@/components/nav-bar.vue'
	export default {
		components: {
			commonList,navBar
		},
		data() {
			return {
				searchValue: '',
				scrollHeight: '0px',
				background: {
					backgroundColor: '#FE3A33',
				},
				keyword: '',
				tabCurrent: 0,
				category: [{
					cname: '首页'
				}],
				notice: [
					'惠多多先行测试版来了。淘宝购物先领券，一块两块变万块！早上晚上点外卖，十块八块来个券~',
				],
				pingtais: [{
						icon: '../../static/icons/taobao.png',
						name: '淘宝'
					},
					{
						icon: '../../static/icons/pinduoduo.png',
						name: '拼多多'
					},
					{
						icon: '../../static/icons/youxuan.png',
						name: '自营优选'
					},
					{
						icon: '../../static/icons/jingdong.png',
						name: '京东'
					},
					{
						icon: '../../static/icons/suning.png',
						name: '苏宁易购'
					},
					{
						icon: '../../static/icons/weipinhui.png',
						name: '唯品会'
					},
					{
						icon: '../../static/icons/baoyou.png',
						name: '9.9包邮'
					},
					{
						icon: '../../static/icons/meituan.png',
						name: '美团'
					},
					{
						icon: '../../static/icons/elm.png',
						name: '饿了么'
					},
					{
						icon: '../../static/icons/miaosha.png',
						name: '今日秒杀'
					},
				],
				banners: [],
			}
		},

		mounted() {
			this.initData();
			let info = uni.createSelectorQuery().in(this).select('.swiper-page').boundingClientRect();
			info.exec(res => {
				// console.log("得到布局位置信息" + JSON.stringify(res));
				// console.log("节点离页面顶部的距离为" + res[0].top);
				try {
					const systemInfo = uni.getSystemInfoSync();
					// console.log(systemInfo.windowHeight);
					this.scrollHeight = systemInfo.windowHeight - res[0].top + 'px'
					// console.log(this.scrollHeight)
				} catch (e) {
					console.log(e)
				}
			})
		},
		// 滑动到底部加载新数据
		// onReachBottom() {
		// 	this.$refs.commonList.loadingMore()
		// },
		methods: {
			tabChange(index) {
				this.tabCurrent = index;
				console.log(this.category[index].cname + '的cid为：'+this.category[index].cid)
			},
			scrollToBottom() {
				console.log('滑动到底部了')
				let index=this.tabCurrent ? 1 : 0
				this.$refs.commonList[index].loadingMore()
			},
			tabswiper(e) {
				this.tabCurrent = e.detail.current
				// console.log(this.category[this.tabCurrent])
			},
			click() {
				console.log('年底阿姨');
			},
			toGoodsInfo(id) {
				uni.navigateTo({
					url: '../show/show?id=' + id
				})
			},
			initData() {
				let banners = this.myCache('banners');
				let category = this.myCache('category');
				if (!banners) {
					// res.data.length
					this.$myRequest('/banner', {})
						.then(res => {
							for (let i = 0; i < 3; i++) {
								this.banners.push({
									image: res.data[i].topicImage
								})
							}
							this.myCache('banners', this.banners, 60 * 60 * 12)
						})
				}else{
					this.banners=banners
				}
				if(!category){
					this.$myRequest('/category', {}).then(res => {
						this.category = this.category.concat(res.data)
						this.myCache('category', this.category, 60 * 60 * 12)
					})
				}else{
					this.category=category
				}
				
			},
			toSearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			bannerClick(index){
				console.log('bannerclick'+index)
				uni.navigateTo({
					url:'../banner/webview?url='+'http://jingpage.com/#/tmallOne?app_key=fmyivm'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo-view image {
		width: 40rpx;
		height: 40rpx;
	}

	.logo-view text {
		color: #fff;
		margin: 0 10rpx 0 5rpx;
	}

	.goods-thumb-view uni-image {}

	.pingtai-icon {
		width: 60rpx;
	}

	.wrap {
		padding: 16rpx;
	}
	.bor-bg{
		border: none;
		position: absolute;
		top: -32rpx;
		left: -12%;
		right: -12%;
		height: 240rpx;
		background-color: #fc4a17;
		border-radius: 0 0 50% 50%;
	}
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.goods-list {
		background-color: #fff;
		padding: 30rpx 20rpx;
		border-radius: 4px;
		margin: 20rpx 0;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 20rpx;
	}
</style>
